<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '工作台',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>
<template>
  <view class="work-index pt-2">
    <image class="work-bg" src="/static/icon/work-bg.png" mode="widthFix" />
    <wd-card v-for="item in workOptions" :key="item.title">
      <wd-grid :column="4">
        <view class="work-title">{{ item.title }}</view>
        <wd-grid-item use-slot v-for="row in item.children" :key="row.title" @tap="goPage(row)">
          <image class="work-icon" :src="getImagePath(row.icon)" />
          <view class="work-name">{{ row.title }}</view>
        </wd-grid-item>
      </wd-grid>
    </wd-card>
  </view>
</template>

<script lang="ts" setup>
const getImagePath = (name:string) => {
  return `/static/icon/${name}.svg`;
};
const workOptions = [
  {
    title: '日常工作',
    children: [
      {
        icon: 'work1',
        title: '打卡签到',
        url: '/pages/work/sign',
      },
      {
        icon: 'work2',
        title: '事件管理',
        url: '/pages/work/event',
      },
      {
        icon: 'work3',
        title: '视频监控',
      },
      {
        icon: 'work4',
        title: '水质自检',
        url: '/pages/work/water',
      },
      {
        icon: 'work5',
        title: '巡查管理',
        url: '/pages/work/patrol',
      },
    ],
  },
  {
    title: '统计分析',
    children: [
      {
        icon: 'work6',
        title: '事件统计',
        url: '/pages/work/statistics',
      },
      {
        icon: 'work7',
        title: '巡查记录',
        url: '/pages/work/record',
      },
    ],
  },
  {
    title: '综合查询',
    children: [
      {
        icon: 'work8',
        title: '河道信息',
        url: '/pages/work/river', 
      },
      {
        icon: 'work9',
        title: '资料库',
        url: '/pages/work/file',
      },
    ],
  },
]
const goPage = (row: any) => {
  console.log('row.url',row.url)
  if (!row.url) return
  uni.navigateTo({
    url: row.url,
  })
}
</script> 
<style lang="scss">
page {
  background: #f4f8fb;
  padding-bottom: 180rpx;
  min-height: calc(100vh - 180rpx);
}
.work-index {
  position: relative;
}
.work-bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

:deep(.wd-card) {
  position: relative;
  padding: 32rpx 32rpx 20rpx !important;
}
.work-title {
  color: #333333;
  font-size: 28rpx;
  font-weight: bold;
  position: relative;
  width: fit-content;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8rpx;
    background: #2953ff;
    opacity: 0.2;
  }
}
.work-name {
  font-size: 24rpx;
  color: #333;
}
.work-icon {
  width: 72rpx;
  height: 72rpx;
  margin: 10rpx auto;
}
</style>
